<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <#include "include.ftl">
    <meta charset="UTF-8">
    <title>登陆页</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            position: absolute;
            height: 100%;
            width: 100%;
            background-image: url("${ctx}/common/imgs/login-bg.jpg");
            background-position: center;
        }

        .el-row {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        .el-col {
            margin: auto;
        }

        .login-btn {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="5">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name" placeholder="手机号/邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.pass" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-btn" type="primary" @click="login">登陆</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            form: {
                name: '123',
                pass: '123'
            }
        },
        methods: {
            login() {
                var name = this.form.name.trim(),
                        pass = this.form.pass.trim();
                if ($.isEmptyObject(name)) {
                    this.$message({
                        message: '请输入用户名!',
                        type: 'warning',
                        center: true
                    });
                    return false;
                }
                if ($.isEmptyObject(pass)) {
                    this.$message({
                        message: '请输入密码!',
                        type: 'warning',
                        center: true
                    });
                    return false;
                }

                if (name == '123' && pass == '123') {
                    this.$message({
                        message: '登陆成功!',
                        type: 'success',
                        center: true
                    });
                    window.location.href = ctx + "/login/main";
                    return true;
                } else {
                    this.$message({
                        message: '登陆失败,用户名或密码错误!',
                        type: 'error',
                        center: true
                    });
                    return true;
                }
            }
        }
    })
</script>
</html>
